<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="extendTableList"
      style="width: 100%"
      @cell-click="gotoInfo"
    >
      <el-table-column
        prop="keyName"
        :label="$t('keyName')"
      />
      <el-table-column
        prop="name"
        :label="$t('name')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{
              formatDate(scope.row.createdDate)
            }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click.stop="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click.stop="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogExtendTableVisible"
      top="15px"
    >
      <el-form
        label-width="20%"
        :model="extendTable"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="extendTable.name"/>
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="extendTable.keyName"/>
        </el-form-item>
        <el-form-item v-if="!extendTable.tableId" :label="$t('apiSecret')">
          <el-input v-model="extendTable.apiSecret"/>
        </el-form-item>
        <el-form-item v-if="!extendTable.tableId">
          <el-table
            :data="extendTable.columnList"
            style="width: 100%"
          >
            <el-table-column
              :label="$t('keyName')"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.keyName"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('name')"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('type')"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.type"
                >
                  <el-option
                    v-for="(item,index) in columnTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('default')+$t('value')"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.defaultValue"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('not')+$t('empty')"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.notNull"
                />
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('function')"
              width="120"
            >
              <template slot="header" slot-scope="scope">
                <el-button
                  @click="addRow"
                >{{ $t('add') }}
                </el-button>
              </template>
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  @click.native.prevent="deleteRow(scope.row)"
                >
                  {{ $t('delete') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogExtendTableVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cancelNotice, formatDate, listExtendTableColumnType, successNotice } from '@/util/common'
import { deleteExtendTable, insertExtendTable, listExtendTable, updateExtendTable } from '@/api/extend/extendTableApi'
import { getCompanyId, getUserId } from '@/util/storage'

export default {
  name: 'ExtendTableList',
  data() {
    return {
      extendTableList: [],
      extendTable: {},
      dialogExtendTableVisible: false,
      userId: getUserId(),
      companyId: getCompanyId(),
      columnTypeList: []
    }
  }, created() {
    this.columnTypeList = listExtendTableColumnType(this)
    this.listExtendTable()
  },
  methods: {
    gotoInfo(item) {
      this.$router.push({
        path: '/extend/table/info/' + item.tableId,
        query: {
          tableId: item.tableId,
          name: item.name,
          keyName: item.keyName
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    deleteRow(item) {
      for (const i in this.extendTable.columnList) {
        const column = this.extendTable.columnList[i]
        if (column.keyName === item.keyName) {
          this.extendTable.columnList.splice(i, 1)
          break
        }
      }
    },
    addRow() {
      this.extendTable.columnList.push({
        keyName: '',
        name: '',
        type: '',
        defaultValue: '',
        notNull: false
      })
    },
    showInsert() {
      this.extendTable = {
        userId: this.userId,
        companyId: this.companyId,
        columnList: []
      }
      this.dialogExtendTableVisible = true
    },
    listExtendTable() {
      listExtendTable({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.extendTableList = data
        } else {
          this.extendTableList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.extendTable
      }
      if (!json.tableId) {
        insertExtendTable(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogExtendTableVisible = false
          }
          this.listExtendTable()
        })
      } else {
        updateExtendTable(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogExtendTableVisible = false
          }
          this.listExtendTable()
        })
      }
    },
    edit(item) {
      this.extendTable = item
      this.dialogExtendTableVisible = true
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteExtendTable({
            tableId: item.tableId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listExtendTable()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

<style scoped>

</style>
